<template>
  <div class="advance-payment">
    <div class="amount-box">
        <p class="label">输入金额</p>
        <div class="input-amount">
            <p>{{ amount && amount.length ? amount : '请输入金额' }}</p>
        </div>
        <p class="label">快捷金额</p>
        <div class="quick-amount">
            <div v-for="item in quickAmount" @click="quickAmountClick(item)" :key="item" class="amount-item flex-center">￥{{ item }}</div>
        </div>
    </div>
    <div class="num-content">
      <div class="keyboard">
          <div
          v-for="item in amountList"
          :key="item.key"
          @click="clickItem(item)"
          :class="{'key-item': true, 'clear-btn': item.key === 'CLEAR', 'confirm-btn': item.key === 'CONFIRM'}"
          >{{ item.value }}</div>
        <div class="confirm-btn" @click="confirmClick">确认</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
    data() {
        return {
            amountList: [
                {
                    key: 1,
                    value: 1
                },
                {
                    key: 2,
                    value: 2
                },
                {
                    key: 3,
                    value: 3
                },
                {
                    key: 4,
                    value: 4
                },
                {
                    key: 5,
                    value: 5
                },
                {
                    key: 6,
                    value: 6
                },
                {
                    key: 7,
                    value: 7
                },
                {
                    key: 8,
                    value: 8
                },
                {
                    key: 9,
                    value: 9
                },
                {
                    key: 0,
                    value: 0
                },
                {
                    key: '.',
                    value: '.'
                },
                {
                    key: 'CLEAR',
                    value: '清空'
                }
            ],
            amountArr: [],
            quickAmount: ['1000', '2000', '5000', '10000' ]
        }
    },
    computed: {
        amount() {
            return this.amountArr.join('')
        }
    },
    methods: {
        clickItem(item) {
            if (item.key === 'CLEAR') {
                this.clearClick(item)
            }
            else if (item.key === 'CONFIRM') {
                this.confirmClick()
            }
            else {
                this.amountClick(item)
            }
        },
        clearClick(item) {
            this.amountArr.length && this.amountArr.pop()
        },
        confirmClick() {
            console.log('确认后得到的金额:', this.amount)
            this.$router.push('/checkPersonalInfo')
        },
        amountClick(item) {
            this.amountArr.push(item.value)
        },
        quickAmountClick(item) {
            console.log(item, 'item===')
            this.amountArr = item.split('')
        }
    }
}
</script>

<style lang="scss" scoped>
.advance-payment {
    height: 100%;
    padding: 75px 110px 0 110px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-evenly;
    .amount-box {
        // width: 520px;
        flex: 1;
        height: 100%;
        margin-right: 78px;
        .label {
            font-size: 26px;
            font-family: Adobe Heiti Std;
            font-weight: normal;
            margin-bottom: 28px;
            color: #585D69;
        }
        .input-amount {
            width: 100%;
            height: 63px;
            line-height: 63px;
            background: #FFFFFF;
            border: 1px solid #B7D5FF;
            border-radius: 11px;
            padding-left: 28px;
            box-sizing: border-box;
            margin: 0 0 49px 0;
            p {
                font-size: 26px;
                color: #A2AABC;
            }
        }
        .quick-amount {
            display: flex;
        }
        .amount-item {
            width: 122px;
            height: 82px;
            background: #FFFFFF;
            border: 1px solid #B7D5FF;
            border-radius: 11px;
            margin-right: 10px;
            color: #2D87FF;
            &:last-child {
                margin-right: 0;
            }
        }
    }
    .num-content {
        width: 468px;
        flex-shrink: 0;
        box-sizing: border-box;
    }
    .num {
        width: 100%;
        height: 63px;
        line-height: 63px;
        background: #FFFFFF;
        border: 1px solid #B7D5FF;
        border-radius: 11px;
        margin-bottom: 30px;
        padding: 0 20px;
        box-sizing: border-box;
    }
    .place-text {
        font-size: 26px;
        font-family: Adobe Heiti Std;
        font-weight: normal;
        color: #A2AABC;
    }
    .keyboard {
        display: flex;
        flex-wrap: wrap;
    }
    .key-item {
        width: 142px;
        height: 54px;
        line-height: 54px;
        text-align: center;
        background: #2D87FF;
        border-radius: 11px;
        font-size: 28px;
        font-family: Adobe Heiti Std;
        font-weight: normal;
        color: #FFFFFF;
        margin-right: 20px;
        margin-bottom: 20px;
        &:nth-child(3n) {
            margin-right: 0
        }
    }
    .clear-btn {
        background: #757F8D;
    }
    .confirm-btn {
        width: 100%;
        height: 54px;
        line-height: 54px;
        text-align: center;
        background: #FEC019;
        border-radius: 11px;
        color: #FFFFFF;
        font-size: 28px;
    }
}
</style>